light mode
night mode
অ্যাজাক্স (Ajax)

উদাহরণ সহ Ajax এবং API Integration

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং RESTful API Integration (Ajax এবং RESTful API এর সংযোগ) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এবং API ইন্টিগ্রেশন ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ পদ্ধতি, যা ডেটা রিকোয়েস্ট এবং রেসপন্সের মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে ইন্টারঅ্যাকশন সহজ করে। এই পদ্ধতিতে Ajax ব্যবহার করে RESTful API কল করা হয় এবং API থেকে প্রাপ্ত ডেটা UI তে ডাইনামিক্যালি রেন্ডার করা হয়।

উদাহরণ: Ajax এবং API Integration

এই উদাহরণে, আমরা একটি Employee Management API ইন্টিগ্রেট করবো, যেখানে Ajax ব্যবহার করে API থেকে ডেটা ফেচ, নতুন ডেটা অ্যাড, আপডেট, এবং ডিলিট করা যাবে।

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax and API Integration Example</title>
    <style>
        /* টেবিল স্টাইল */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h1>Employee Management</h1>
    <button onclick="fetchEmployees()">Fetch Employees</button>
    <button onclick="addEmployee()">Add New Employee</button>
    <button onclick="updateEmployee()">Update Employee</button>
    <button onclick="deleteEmployee()">Delete Employee</button>

    <table id="employee-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div id="message-container" style="margin-top: 20px; color: red;">
        <!-- Error বা অন্যান্য মেসেজ এখানে দেখানো হবে -->
    </div>

    <script>
        // সমস্ত এমপ্লয়ির তালিকা ফেচ করা (GET)
        function fetchEmployees() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://example.com/api/employees", true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        displayEmployees(response);
                    } else {
                        displayError("Error fetching employee data. Status: " + xhr.status);
                    }
                }
            };

            xhr.onerror = function() {
                displayError("Network error occurred while fetching data.");
            };

            xhr.send();
        }

        // নতুন এমপ্লয়ি অ্যাড করা (POST)
        function addEmployee() {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://example.com/api/employees", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 201) {
                        var response = JSON.parse(xhr.responseText);
                        displayEmployees([response]); // নতুন এমপ্লয়ি টেবিলে যোগ করা
                    } else {
                        displayError("Error adding employee. Status: " + xhr.status);
                    }
                }
            };

            var newEmployee = {
                name: "Jane Doe",
                email: "jane@example.com",
                department: "Sales"
            };

            xhr.send(JSON.stringify(newEmployee));
        }

        // এমপ্লয়ি আপডেট করা (PUT)
        function updateEmployee() {
            var xhr = new XMLHttpRequest();
            xhr.open("PUT", "https://example.com/api/employees/123", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        displayEmployees([response]); // আপডেট করা এমপ্লয়ি টেবিলে দেখানো
                    } else {
                        displayError("Error updating employee. Status: " + xhr.status);
                    }
                }
            };

            var updatedEmployee = {
                name: "Jane Smith",
                email: "jane.smith@example.com",
                department: "Marketing"
            };

            xhr.send(JSON.stringify(updatedEmployee));
        }

        // এমপ্লয়ি ডিলিট করা (DELETE)
        function deleteEmployee() {
            var xhr = new XMLHttpRequest();
            xhr.open("DELETE", "https://example.com/api/employees/123", true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        displayError("Employee deleted successfully", false);
                    } else {
                        displayError("Error deleting employee. Status: " + xhr.status);
                    }
                }
            };

            xhr.send();
        }

        // এমপ্লয়ির ডেটা টেবিলে রেন্ডার করার ফাংশন
        function displayEmployees(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.id}</td>
                                 <td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // Error বা মেসেজ ডিসপ্লে করার ফাংশন
        function displayError(message, isError = true) {
            var messageContainer = document.getElementById("message-container");
            messageContainer.style.color = isError ? "red" : "green";
            messageContainer.innerHTML = message;
        }
    </script>
</body>
</html>

উদাহরণের বিশ্লেষণ

১. GET রিকোয়েস্ট (fetchEmployees):

  • GET মেথড ব্যবহার করে সমস্ত এমপ্লয়ির ডেটা ফেচ করা হয়।
  • সফল রেসপন্স হলে (200 স্ট্যাটাস কোড), ডেটা প্রসেস করে displayEmployees ফাংশনের মাধ্যমে টেবিলে রেন্ডার করা হয়।
  • কোনো ত্রুটি হলে displayError ফাংশন ব্যবহার করে মেসেজ দেখানো হয়।

২. POST রিকোয়েস্ট (addEmployee):

  • POST মেথড ব্যবহার করে নতুন এমপ্লয়ির ডেটা API এ পাঠানো হয়।
  • সফল রেসপন্স হলে (201 স্ট্যাটাস কোড), নতুন এমপ্লয়ির ডেটা টেবিলে যোগ করা হয়।
  • কোনো ত্রুটি হলে displayError ফাংশন ব্যবহার করে মেসেজ দেখানো হয়।

৩. PUT রিকোয়েস্ট (updateEmployee):

  • PUT মেথড ব্যবহার করে একটি নির্দিষ্ট এমপ্লয়ির তথ্য আপডেট করা হয়।
  • সফল রেসপন্স হলে (200 স্ট্যাটাস কোড), আপডেট করা এমপ্লয়ির ডেটা টেবিলে দেখানো হয়।
  • কোনো ত্রুটি হলে displayError ফাংশন ব্যবহার করে মেসেজ দেখানো হয়।

৪. DELETE রিকোয়েস্ট (deleteEmployee):

  • DELETE মেথড ব্যবহার করে নির্দিষ্ট ID এর এমপ্লয়ি ডিলিট করা হয়।
  • সফল রেসপন্স হলে একটি কনফার্মেশন মেসেজ দেখানো হয়, অন্যথায় ত্রুটি মেসেজ প্রদর্শিত হয়।

৫. displayEmployees এবং displayError ফাংশন:

  • displayEmployees ফাংশন JSON ডেটা প্রসেস করে টেবিলে রেন্ডার করে।
  • displayError ফাংশন API রেসপন্সে কোনো ত্রুটি হলে তা ব্যবহারকারীর জন্য দেখায়।

API Integration এর সুবিধা

  1. Dynamic Data Update:
    • Ajax এবং API ইন্টিগ্রেশন ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডেটা লোড, আপডেট, এবং ডিলিট করা যায়। এটি UI কে আরও ইন্টারেক্টিভ করে এবং ইউজার এক্সপেরিয়েন্স উন্নত করে।
  2. Asynchronous Operation:
    • Ajax রিকোয়েস্ট অ্যাসিনক্রোনাসভাবে কাজ করে, যার মানে অন্যান্য অপারেশন চলতে থাকে এবং পেজটি ব্যবহারযোগ্য থাকে রিকোয়েস্ট প্রসেস হওয়ার সময়।
  3. JSON Data Handling:
    • RESTful API সাধারণত JSON ফরম্যাটে ডেটা পাঠায়, যা জাভাস্ক্রিপ্টের মাধ্যমে সহজে প্রসেস করা যায় এবং HTML এ রেন্ডার করা যায়।
  4. Scalable and Flexible:
    • API Integration ব্যবহার করে অ্যাপ্লিকেশনকে সহজেই স্কেল করা যায় এবং নতুন ফিচার যোগ করা যায়। এটি অ্যাপ্লিকেশনের ফ্রন্টএন্ড এবং ব্যাকএন্ডকে আলাদা করে রাখে, যা ডেভেলপমেন্ট প্রক্রিয়াকে দ্রুত করে এবং মেইনটেন করা সহজ হয়।

আরও দেখুন...

উদাহরণ সহ Ajax এবং API Integration

or

Don't have an account? Register

Promotion